<%--
  User: yealove
  Date: 9/14/14
  Time: 15:04 PM
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <c:import url="../common/include.jsp"/>
    <title>团队订餐统计系统</title>
    <script>
        $("[name='swithBox']").bootstrapSwitch();
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-6 col-xs-offset-1">
            <div class="h3">充值：</div>
            <div class="row table-responsive">
                <table class="table table-hover table-condensed">
                    <tr>
                        <th>姓名</th>
                        <th>余额</th>
                        <th>操作</th>
                    </tr>
                    <c:if test="${users != null}">
                        <c:forEach items="${users}" var="user" varStatus="s">
                            <tr id="${user.username}">
                                <td><a href="javascript:;"
                                       onclick="showOrder('${user.id}', '${user.name}')">${user.name}[${user.username}]</a>
                                </td>
                                <td id="m${user.id}">${user.money}</td>
                                <td>
                                    <input id="${user.id}" class="form-control input-sm"
                                           style="width: 4em; float: left; margin-right: 10px;" id="money">
                                    <button type="button" class="btn btn-info btn-xs" onclick="pay(${user.id})">充值
                                    </button>
                                </td>
                            </tr>
                            <script>
                                var money = "${user.money}";
                                if (money < 0) {
                                    $("#" + "${user.username}").addClass("danger");
                                }
                            </script>
                        </c:forEach>
                    </c:if>
                    <c:if test="${users == null}">
                        <tr>
                            <td colspan="4" style="text-align: center">无记录</td>
                        </tr>
                    </c:if>
                </table>
            </div>
        </div>
        <div class="col-xs-4 col-md-4 col-xs-offset-1">
            <div class="h3">权限：</div>
            <div class="row table-responsive">
                <table class="table table-hover table-condensed" id="authList">
                    <c:if test="${auths != null}">
                        <c:forEach items="${auths}" var="auth">
                            <tr>
                                <td>${auth.name}</td>
                                <td>
                                    <c:if test="${auth.status eq '0'}">
                                        <div class="switch" data-on="info" data-off="success">
                                            <input name="swithBox" type="checkbox"
                                                   onclick="updateAuth('${auth.key}', '1')"/>
                                        </div>
                                    </c:if>
                                    <c:if test="${auth.status eq '1'}">
                                        <div class="switch" data-on="info" data-off="success"
                                             onclick="updateAuth('${auth.key}', '0')">
                                            <input name="swithBox" type="checkbox" checked/>
                                        </div>
                                    </c:if>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    <c:if test="${auths == null}">
                        <tr>
                            <td colspan="4" style="text-align: center">无记录</td>
                        </tr>
                    </c:if>
                    <c:if test="${shops != null}">
                        <tr>
                            <td>
                                <select id="shop">
                                    <c:forEach items="${shops}" var="shop" varStatus="s">
                                        <option value="${shop.id}">${shop.name}</option>
                                    </c:forEach>
                                </select>
                            </td>
                    </c:if>
                    <c:if test="${shops == null}">
                        <tr>
                            <td colspan="4" style="text-align: center">无记录</td>
                        </tr>
                    </c:if>
                        <td>
                            <button type="button" class="btn btn-info btn-xs" onclick="changeShop()">选择</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    changeShop = function() {
        $.ajax({
            url: '/lunchparty/updateDefaultShop.do', data: 'id=' + $("#shop").val(), success: function (data) {
                alert(data);
            }
        })
    }

    pay = function (id) {
        $.ajax({url: "/lunchparty/pay.do", data: "dictid=" + id + "&dictname=" + $("#" + id).val(), type: "post", success: function (data) {
            $("#m" + id).html(data);
        }});
    }

    updateAuth = function (key, status) {
        $.ajax({url: "/lunchparty/updateAuth.do", data: "dictid=" + key + "&dictname=" + status, type: "post", success: function (data) {
            if (data == 'success') {
                layer.msg("修改成功！", 1, {type: 10});
                location.reload();
            } else {
                layer.msg("修改失败...");
            }
        }});
    }

    showOrder = function (id, name) {
        var url = "/lunchparty/showUserOrder.do";
        $.ajax({url: url, dataType: "json", data: "userId=" + id, success: function (data) {
            laytpl($("#userInfo").html()).render(data, function (html) {
                $.layer({
                    type: 1,
                    title: "[" + name + "]的订餐历史",
                    offset: ['150px' , ''],
                    shadeClose: true,
                    border: false,
                    area: ['600px', '315px'],
                    page: {html: '<div style="width:600px; height:280px; background-color:rgba(0, 0, 0, 0.20); color:#000;"><div style="padding:20px;">' + html + '</div></div>'}
                });
            });
        }});
    }
</script>
<script id="userInfo" type="text/html">
    <table class="table table-condensed">
        <tr>
            <th>序号</th>
            <th>时间</th>
            <th>菜名</th>
            <th>备注</th>
            <th>价格</th>
        </tr>
        {{#
        if(d.length>0) {
        for(var i=0, n=d.length; i
        <n
        ; i++) {
        }}
        <tr>
            <td>{{ i+1 }}</td>
            <td>{{ d[i].createDate }}</td>
            <td>{{ d[i].menuName }}</td>
            <td>{{ d[i].memo }}</td>
            <td>{{ d[i].price }}</td>
        </tr>
        {{#
        }
        } else {
        }}
        <tr>
            <td colspan="3" style="text-align: center">无</td>
        </tr>
        {{#
        }
        }}
    </table>
</script>
</body>
</html>